<template>
  <view class="point-index">

    <view class="bg">
      <view class="top">
        <!-- <navigator class="item" url="./list"> -->
        <navigator class="item">
          <view class="text">我的积分</view>
        </navigator>
        <view class="point">{{ pointInfo.integral }}</view>
        <view class="earn">
          赚积分
        </view>
      </view>
    </view>


    <view class="container">
      <view class="menu">
        <view
          class="item item1"
          @click="goPointShop"
        >
          <img src="../static/point/shangcheng.png" alt="" />
          <text>积分商城</text>
        </view>
        <navigator class="item item2" url="./bill">
          <img src="../static/point/mingxi.png" alt="" />
          <text>积分明细</text>
        </navigator>
        <navigator class="item item3" url="./list">
          <img src="../static/point/dingdan.png" alt="" />
          <text>积分订单</text>
        </navigator>
      </view>
      <view
        class="news"
        @click="goPointShop"
      >
        <text class="title">积分商城上线啦！</text>
        <text class="des">多重好礼等着你</text>
      </view>
      <view class="show">
        <product-list  :sid="selectedStation.stationId"/>
      </view>
    </view>

    <van-action-sheet
      :show="stataionShow"
      :actions="stationActions"
      @select="onStationSelect"
      @close="stataionSelectClose"
    />
  </view>
</template>

<script>

export default {
  head() {
    return {
      title: "积分主页",
    };
  },
  data() {
    return {
      images: [],
      list: [],
      loading: false, //加载状态
      finished: false, //是否完成加载
      refreshing: false, //是否正在上拉刷新
      stataionShow: false,
      stationActions: [],
      selectedStation: {},
      pointInfo: {},
    };
  },
  computed: {

  },
  created(){
    this.init();      
  },
  methods: {
    async init(){
      const {phoneNumber, enterpriseId} = this;
      const res = await this.$Request({
        url: "/getCustomerPointsInfo",
        method: "GET",
        data: {
          mobilePhone: phoneNumber,
          enterpriseId,
        }
      });

      if (res.retCode === 0) {
        this.pointInfo = res.data
      }
      try {
        const res = await this.$Request({
          url: "/selectStaInfoList",
          method: "GET",
          data: {
            enterpriseId: this.enterpriseId,
          }
        });

        if (res.retCode === 0) {
          if (!!res.data) {
            this.stationActions = res.data.map((ele) => {
              return { ...ele, name: ele.stationName };
            });
            this.stationActions = [...this.stationActions];
            
            if(this.stationActions.length == 1){
              this.selectedStation = this.stationActions[0];
              this.stataionShow = false;
            }else{
              this.stataionShow = true;
            }
            // console.log(this.stationActions);
          }
        }
      } catch (error) {
      }
    },
    onStationSelect(q) {
      this.selectedStation = q.detail;
      this.stataionShow = false;
    },
    goPointShop(){
      uni.navigateTo({
        url: `/subPackB/point/shop/_sid?sid=${this.selectedStation.stationId}`
      })
    },
    stataionSelectClose(){
      this.stataionShow = false;
    }
  },
};
</script>

<style>
.point-index {
  position: relative;
}
.point-index .bg {
  background-color: #f3b335;
  width: 100vw;
  height: 372rpx;
  position: relative;
  background: url("../static/point/bj.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  z-index: -1;
}
.point-index .bg .top .text {
  position: absolute;
  left: 4vw;
  top: 8vw;
  margin: 0;
  padding: 0;
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;

  line-height: 40rpx;
}
.point-index .bg .top .point {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 4vw;
  top: 15.33vw;
  width: 36vw;
  height: 16.8vw;
  font-size: 12vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 14vw;
}
.point-index .bg .earn {
  position: absolute;
  right: 0;
  top: 20.66vw;
  width: 160rpx;
  height: 55rpx;
  font-size: 3.46vw;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: url("../static/point/jifen.png") no-repeat;
  background-size: cover;
  box-sizing: border-box;
  color: #f3b235;
  font-size: 3.46vw;
  padding: 8rpx 20rpx 8rpx 60rpx;
}

.point-index .container {
  margin-top: -13.33vw;
  width: 100%;
  padding: 0 4vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 99;
}
.point-index .container .menu {
  width: 690rpx;
  height: 190rpx;
  background: #ffffff;
  box-shadow: 0px 2px 10px 5px rgba(227, 227, 227, 0.5);
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.point-index .container .menu .item {
  width: 112rpx;
}
.point-index .container .menu .item img {
  display: inline-block;
  width: 90rpx;
  height: 90rpx;
  margin: 0 auto;
}
.point-index .container .menu .item text {
  display: inline-block;
  font-weight: 400;
  color: #666666;
  text-align: center;
  margin-top: 20rpx;
  height: 40rpx;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 40rpx;
}

.point-index .container .news {
  margin-top: 30rpx;
  width: 690rpx;
  height: 160rpx;
  background: url("../static/point/banner.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.point-index .container .news img {
  width: 100%;
  height: 100%;
}
.point-index .container .news .title {
  font-size: 40rpx;
  color: #f9f9e5;
  font-weight: 700;
  position: absolute;
  left: 75rpx;
  top: 38rpx;
}
.point-index .container .news .des {
  font-size: 24rpx;
  color: #f9d996;
  font-weight: 600;
  position: absolute;
  left: 220rpx;
  top: 90rpx;
}
</style>
